<template>
  <el-form-item label="ID">
    <el-input v-model="selectedOptions.name" disabled />
  </el-form-item>
  <el-form-item label="name">
    <el-input v-model="selectedWidget.name" disabled />
  </el-form-item>
  <el-form-item label="栅格间隔">
    <el-input-number v-model="selectedOptions.gutter" :min="0" />
  </el-form-item>
  <el-form-item label="水平排列">
    <el-select v-model="selectedOptions.justify" placeholder="Select">
      <el-option
        v-for="item in justifyOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
  <el-form-item label="垂直排列">
    <el-select v-model="selectedOptions.align" placeholder="Select">
      <el-option
        v-for="item in alignOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
  <el-form-item label="元素标签">
    <el-input v-model="selectedOptions.tag" />
  </el-form-item>

  <el-divider border-style="dotted" />

  <el-form-item
    v-for="(item, index) in $props.selectedWidget.widgetList"
    :key="item.id"
    :label="`栅格宽度${index}`"
  >
    <el-input-number :min="1" :max="24" v-model="item.options.span" />
    <el-button
      link
      type="primary"
      :icon="Minus"
      @click="handleMinus(index)"
      :disabled="selectedWidget.widgetList.length <= 1 ? true : false"
    ></el-button>
  </el-form-item>
  <el-button link type="primary" :icon="Plus" @click="handlePlus"></el-button>
</template>

<script setup>
import { Plus, Minus } from "@element-plus/icons-vue";
import { nanoid } from "nanoid";
import { deepClone } from "@/utils/index";
import { getContainerByType } from "@/views/pageDesign/components/globalVariable";

defineOptions({
  name: "rowAttribute",
  inheritAttrs: false,
});
let $props = defineProps({
  selectedWidget: {
    type: Object,
    required: true,
  },
  selectedOptions: {
    type: Object,
    required: true,
  },
});

let justifyOptions = [
  {
    value: "start",
    label: "start",
  },
  {
    value: "end",
    label: "end",
  },
  {
    value: "center",
    label: "center",
  },
  {
    value: "space-around",
    label: "space-around",
  },
  {
    value: "space-between",
    label: "space-between",
  },
  {
    value: "space-evenly",
    label: "space-evenly",
  },
];
let alignOptions = [
  {
    value: "top",
    label: "top",
  },
  {
    value: "middle",
    label: "middle",
  },
  {
    value: "bottom",
    label: "bottom",
  },
];

let handleMinus = (index) => {
  $props.selectedWidget.widgetList.splice(index, 1);
};
let handlePlus = () => {
  let newCol = deepClone(getContainerByType("col"));
  newCol.id = nanoid();
  newCol.options.name = newCol.id;
  $props.selectedWidget.widgetList.push(newCol);
};
</script>

<style lang="scss" scoped></style>
